@import '../../vendor/angular-ui-tree/dist/angular-ui-tree.min';
@import '../../vendor/artifact-modal/dist/assets/tuleap-artifact-modal';
@import '../../vendor/angular-bootstrap-datetimepicker/src/scss/datetimepicker';
@import '../../vendor/angular-ui-select/dist/select';
@import '../../vendor/ng-scrollbar/dist/ng-scrollbar';
@import '../../vendor/dragular/dist/dragular';
@import '../../vendor/animate.css/animate';
@import '../../../../../../../src/www/themes/common/css/utils/colors';

$kanban-column-header-height: 48px;
$kanban-column-footer-height: 48px;

@import 'error/error';
@import 'edit-kanban/edit-kanban';
@import 'kanban-item/kanban-item';
@import 'highlight-filter/highlight';
@import 'reports-modal/reports-modal';
@import 'socket/socket';
@import 'reports-modal/diagram';

@-webkit-keyframes loading-header {
    0%, 50%, 100% {
        opacity: 0.2;
    }
    25%, 75% {
        opacity: 0.03;
    }
}

@keyframes loading-header {
    0%, 50%, 100% {
        opacity: 0.2;
    }
    25%, 75% {
        opacity: 0.03;
    }
}

@-webkit-keyframes loading-column {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.5;
    }
}

@keyframes loading-column {
    0%, 50%, 100% {
        opacity: 1;
    }
    25%, 75% {
        opacity: 0.5;
    }
}

.loading {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-name: loading-column;
    animation-name: loading-column;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

#kanban-app {
    height: 100%;
}

#kanban-header {
    padding: 20px;

    > h1 {
        float: left;
        margin: 0 20px 0 0;
        display: inline-block;
    }

    > button {
        float: left;
        position: relative;
        top: 10px;
        margin: 0 10px 10px 0;
    }

    .view-switcher, > .input-search {
        float: right;
        position: relative;
        top: 10px;
        margin: 0 10px 10px 0;
    }

    > .input-search {
        &:before {
            position: absolute;
            top: 3px;
            left: 9px;
            font-family: FontAwesome;
            content: '\f002';
            opacity: 0.5;
            font-size: 12px;
        }

        > input {
            width: 220px;
            height: 26px;
            padding-left: 26px;
            -webkit-appearance: none;
            box-sizing: border-box;
        }
    }
}

#kanban-board {
    $fontsizeheader: 14px;
    $wip-reached-color: #F39333;
    $wip-reached-bg-color: #FFECD9;
    $border-color: #E0E0E0;
    $light-border-color: #EFEFEF;

    width: 100%;
    height: 100%;
    white-space: nowrap;
    font-size: 0;
    overflow-y: hidden;
    overflow-x: auto;

    @import 'kanban-column/kanban-column';

    > div {
        position: relative;
        display: inline-block;
        height: 100%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        min-width: 180px;

        border-right: 1px solid $border-color;
        border-top-width: 4px;
        background: #FBFBFB;
        color: #CCC;
        font-size: $fontsizeheader;
        line-height: 1.25em;
        text-align: center;
        white-space: normal;

        > .column-header {
            position: absolute;
            top: 0;
            width: 100%;
            height: $kanban-column-header-height;
            max-height: $kanban-column-header-height;
            z-index: 1001;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 15px 0 0;
            border-right: 1px solid $border-color;
            font-size: $fontsizeheader;
            font-weight: 400;
            font-family: 'SourceSansPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            letter-spacing: 0.03em;
            color: #CCC;
            background: white;
            vertical-align: middle;
            box-shadow: inset 0 3px 0 #666, inset 0 -1px 0 $border-color;
            color: #666;
            opacity: 0.95;

            .wip-limit-form {
                left: auto;
                right: 4px;
                top: 34px;

                &.in {
                    display: block;
                }

                > .arrow {
                    right: 5px;
                    left: auto;
                }

                > form.popover-content {
                    text-align: center;
                    color: #333333;
                    margin: 0;

                    > .input-append {
                        display: inline-block;
                        margin-bottom: 0px;

                        > input {
                            width: 40px;
                        }
                    }
                }
            }

            > .wip-limit {
                float: right;
                color: white;
                margin: 0 7px 0 0;
                padding: 0px 7px;
                line-height: 20px;
                border-radius: 16px;
                font-weight: bold;
                font-size: 0.9em;
                background: #666;

                &.editable {
                    cursor: pointer;
                }

                > span > i {
                    font-size: 0.85em;
                    margin: 0 3px 0 0;
                }

                &.infinity {
                    font-size: 1.1em;
                }
            }

            > .wip-count {
                float: right;
                position: relative;
                margin: 0 4px;
                font-size: 3em;
                font-weight: bold;
                opacity: 0.2;
                // For IE11: if not specified, the animation will not stop even if
                // .loading class is not present anymore
                -webkit-animation-duration: 0s;
                animation-duration: 0s;

                &.loading {
                    -webkit-animation-name: loading-header;
                    animation-name: loading-header;
                    -webkit-animation-duration: 1s;
                    animation-duration: 1s;
                }
            }

            > .column-label {
                font-size: 1.1em;
                text-transform: uppercase;
                position: relative;
            }

            > .warning-wip {
                float: left;
                font-size: 1.4em;

                &.ng-enter {
                    -webkit-animation: bounceIn 0.3s;
                    -moz-animation: bounceIn 0.3s;
                    -ms-animation: bounceIn 0.3s;
                    animation: bounceIn 0.3s;
                }

                &.ng-leave {
                    -webkit-animation: fadeOut 0.15s;
                    -moz-animation: fadeOut 0.15s;
                    -ms-animation: fadeOut 0.15s;
                    animation: fadeOut 0.15s;
                }
            }

            > .toggle-column {
                float: left;
                padding: 0 15px;
                cursor: pointer;
                font-size: 1.1em;
                transition: opacity 0.1s linear;

                &:hover {
                    opacity: 0.7;
                    transition: opacity 0.1s linear;
                }
            }
        }

        add-in-place {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: $kanban-column-footer-height;
            z-index: 1001;
            -moz-box-sizing: border-box;
            box-sizing: border-box;

            > .column-content-addinplace {
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.95);
                border-top: 1px solid $light-border-color;
                border-right: 1px solid $border-color;
                color: #333;
                text-align: center;
                -moz-box-sizing: border-box;
                box-sizing: border-box;

                > i {
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding: 13px 0 0;
                    box-sizing: border-box;
                    color: #333;
                    font-size: 22px;
                    opacity: 0.6;
                    cursor: pointer;
                    transition: opacity 0.1s linear;

                    &:hover {
                        opacity: 1;
                        transition: opacity 0.1s linear;
                    }
                }

                &.open {
                    > i {
                        display: none;
                    }

                    > form {
                        padding: 7px 9px 0;
                        margin: 0;

                        > .input-append {
                            width: 100%;

                            > input[type=text] {
                                -moz-box-sizing: border-box;
                                box-sizing: border-box;
                                height: 30px;
                                width: 80%;
                            }

                            > button {
                                width: 10%;
                                padding: 4px 0;
                            }
                        }
                    }
                }
            }
        }

        &.small_column > add-in-place > .column-content-addinplace > form > .input-append {
            > input[type=text] {
                width: 70%;
            }

            > button {
                width: 15%;
            }
        }

        &.column-displayed {
            vertical-align: top;
            min-width: 180px;

            .column-content {
                height: 100%;
                position: relative;
            }

            > .column-label {
                display: none;
            }
        }

        &.column-hidden {
            width: 75px;
            min-width: 75px;
            white-space: nowrap;
            cursor: pointer;
            color: #666;
            background: #EEE;

            > .column-header {

                > .column-label,
                > .wip-limit,
                > .warning-wip,
                > .wip-limit-form,
                > .wip-count {
                    display: none;
                }

                > .toggle-column {
                    float: none;
                    margin-right: auto;
                    margin-left: auto;
                    cursor: pointer;
                    display: block;
                    font-size: 1.1em;
                }

                &.backlog {
                    font-size: 1.4em;
                }
            }

            > .column-label {
                width: 75px;
                z-index: 1;
                position: relative;
                text-transform: uppercase;

                > div {
                    position: relative;
                    left: -10px;
                    margin-top: 85px;
                    top: 0;
                    text-align: right;
                    direction: rtl;
                    font-family: 'SourceSansPro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
                    letter-spacing: 0.05em;
                    font-size: 1.2em;
                    -webkit-transform: rotate(270deg);
                    -moz-transform: rotate(270deg);
                    -ms-transform: rotate(270deg);
                    -o-transform: rotate(270deg);
                    transform: rotate(270deg);

                    > .count {
                        position: relative;
                        top: 17px;
                        left: 6px;
                        font-size: 4em;
                        font-weight: bold;
                        color: #CCC;
                    }
                }
            }

            &.wip-reached {
                background: $wip-reached-bg-color;
                color: $wip-reached-color;

                > .column-label > div > .count {
                    color: $wip-reached-color;
                    opacity: 0.3;
                }
            }

            &:hover {
                opacity: 0.7;
            }

            &.archive {
                color: #666;
                background: #EEE;

                > .column-label > .count {
                    color: #CCC;
                }
            }
        }

        &.wip-reached {
            background: $wip-reached-bg-color;

            > .column-header {
                box-shadow: inset 0 3px 0 $wip-reached-color, inset 0 -3px 0 $wip-reached-color;
                color: $wip-reached-color;

                > .wip-limit {
                    background: $wip-reached-color;
                }
            }
        }
    }

    > .backlog {
        border-left: none;
    }

    > .archive {
        border-right: none;
    }
}
